<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-control" content="no-cache">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<title>${field.typetitle}_{ms:global.name/}</title>
<meta name="keywords" content="${field.keyword}"/>
<meta name="description" content="${field.descrip}"/>
<link  href="/{ms:global.style/}/css/common.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="/{ms:global.style/}/js/jquery.min.js"></script>
<link href="{@ms:file global.logo/}" rel="shortcut icon" type="image/x-icon" />
  <script src="/static/mdiy/index.js"></script>
  <!--引入vue库-->
  <script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
  <!--引入element-ui库-->

  <script src="${base}/static/plugins/element-ui/2.15.8/index.min.js"></script>
  <link rel="stylesheet" href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css">

  <!--网络请求框架-->
  <script src="/static/plugins/axios/0.18.0/axios.min.js"></script>
  <script src="/static/plugins/qs/6.6.0/qs.min.js"></script>
  <script src="/static/plugins/ms/2.0/ms.umd.js"></script>
  <script src="/static/plugins/ms/2.0/ms-el-form.umd.js"></script>

  <script>
    ms.base = "{ms:global.contextpath/}";
  </script>


</head>
<body>
<#include "head.htm"/>
<#assign typeid=field.typeid>
<#assign ids=field.parentids>
<#if ids==''><#assign topid=typeid><#else>
<#assign topid=ids?split(",")[0]></#if>
<div class="main">
  <link rel='stylesheet' type='text/css'  href='/{ms:global.style/}/css/page.css'/>
  <div class="page-header page-header-about" style="background: url(/{ms:global.style/}/images/about.jpg) no-repeat center top;">
    <div class="s">
      <div class="wp">
        <div class="wps">
          <h1>{ms:channel type="self" typeid=topid}${field.typetitle}{/ms:channel}</h1>
          <div class="line"></div>
          <p> {ms:channel type="self" typeid=topid} ${field.typedescrip} {/ms:channel} </p>
        </div>
      </div>
    </div>
  </div>
  <style>
	.about-section{padding: 60px 0;}
	.about-section .title{ height: 40px; line-height: 40px; margin-bottom: 30px; text-align: center; font-size: 26px;}
	.about-us .s{ background:#f6f7fc;}
	.about-us .m{width: 500px;}
	.about-us .m img{width: 100%; height: 280px;}
	.about-us .des{ width: 636px; padding: 20px;}
	.about-us .des p{font-size:14px; line-height: 24px; margin-bottom: 15px; color:#777;}
	.about-us .line{ margin-top: 20px; height:2px; width: 80px; background: #0595c7;}
	.about-team{min-width: 1200px;background: #f6f7fc;}
	.about-team p{padding: 0 80px;  font-size: 14px; line-height: 25px;color:#777;}
	.about-result{min-width: 1200px;}
	.about-result p{padding: 0 80px;  font-size: 14px; line-height: 25px;color:#777;}
	.about-future{min-width: 1200px;background: #f6f7fc;}
	.about-future p{padding: 0 80px;  font-size: 14px; line-height: 25px;color:#777;}
</style>
  <div class="about-us about-section">
    <div class="title wp">${field.typetitle}</div>
    <div class="about-team about-section">
      <div class="wp">
        <div class="s wps">
          <p>${field.content}</p>
        </div>
      </div>
    </div>
  </div>
  <div class="page-contact">
    <div class="wp">
      <div class="s">
        <div class="your-ask">
          <h6>我猜您现在可能存在如下疑问：</h6>
          <ul class="cl">
            <li>你们能做什么？</li>
            <li>需要多少钱？</li>
            <li>需要多久？</li>
            <li>我需要做什么?</li>
            <li>需要提供什么资料？</li>
            <li>售后服务怎么样？</li>
          </ul>
        </div>
        <div class="info-box">

          <form  id="form" enctype="multipart/form-data" method="post">
            <input type='text' v-model="form.inputName" name="姓名" value="" placeholder="姓名" class="username"/>
            <input type='text' v-model="form.inputTel"  name="电话" value="" placeholder="电话" class="telephone"/>
            <input type='text' v-model="form.textareaNvsdd" name="问题" value="" placeholder="您的问题或者需求~" class="content"/>
            <a class="post">
              <button type='submit' @click="save" class="post">提交您的需求</button>
            </a> <a href="https://wpa.qq.com/msgrd?v=3&uin=内容可配置&site=qq&menu=yes" class="btn">点击在线咨询</a>
          </form>

          <script>
            var form = new Vue({
              el: '#form',
              data: function () {
                return {

                  form: {
                    modelName: "liuyan", //modelName需要填写自己的模型昵称
                    // 名字
                    inputName:'',

                    inputTel:'',
                    // 留言
                    textareaNvsdd:'',

                  },
                  rules:{
                  },
                }
              },
              methods: {

                save: function (e) {
                  e.preventDefault();//阻止默认事件跳转
                  var that = this;


                  // 通过模型渲染的表单 则放开下面的注释(3行)
                  //1 window.formModel.form.rand_code = that.form.rand_code;
                  //2 ms.http.post("/mdiy/form/data/save.do", window.formModel.form).then(function (res) {
                  ms.http.post("/mdiy/form/data/save.do", that.form).then(function (res) {
                    if (res.result) {
                      that.$notify({
                        title: '成功',
                        type: 'success',
                        message: '感谢您的参与!'
                      });
                      //3 window.formModel.form = {}

                      that.form.modelName=""; //清空表单
                      that.form.inputTel=""; //清空表单
                      that.form.textareaNvsdd=""; //清空表单
                    } else {
                      that.$notify({
                        title: '失败',
                        message: res.msg,
                        type: 'warning'
                      });
                    }

                  })
                }


              }
            })
          </script>

          <p class="war">同样的问题每个人侧重点不同，很难有标准的答案；请认真填写表单信息或直接在线联系，我们会给您最合适的答案！</p>
        </div>
      </div>
    </div>
  </div>
  <div class="showmsg"></div>
</div>
<#include "footer.htm"/>
</body>
</html>
